<template>
  <el-dialog title="采购单付款申请" :visible.sync="dialogVisible" width="1400px" :close-on-click-modal="false"
    :modal-append-to-body="false" v-drag2anywhere>
    <div>
      <div class="title">采购单查询</div>
      <el-form :model="filterData" size="mini">
        <el-row :gutter="20">
          <el-col style="width: 180px;">
            <el-form-item>
              <el-input v-model="filterData.reqcode" placeholder="采购单号" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col style="width: 200px;">
            <el-form-item>
              <el-input v-model="filterData.title" placeholder="商品名称或规格型号" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col style="width: 180px;">
            <el-form-item>
              <el-input v-model="filterData.seller" placeholder="销方单位名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col style="width: 180px;">
            <el-form-item>
              <el-input v-model="filterData.buyer" placeholder="购方单位名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col style="width: 180px;">
            <el-form-item>
              <el-input v-model="filterData.client" placeholder="客户" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col style="width: 180px;">
            <el-form-item>
              <el-input v-model="filterData.requester" placeholder="业务员" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col style="width: 180px;">
            <el-form-item>
              <el-button icon="el-icon-search" type="primary" @click="handleFilterData">开始搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div>
      <div style="height:300px; overflow-y: auto;">
        <el-table :data="tableData" ref="filterTable" border empty-text="结果为空" height="100%" @select="handleSelection">
          <el-table-column type="selection" width="50px" align="center" :selectable="checkselectable"></el-table-column>
          <el-table-column type="expand" label="详情" width="50px">
            <template v-slot="scope">
              <div style="margin-left: 100px;width: 80%;">
                <el-table border :data="scope.row.goods">
                  <el-table-column label="序号" type="index" width="50px" align="center"></el-table-column>
                  <el-table-column label="产品名称" prop="title"></el-table-column>
                  <el-table-column label="规格型号" prop="model"></el-table-column>
                  <el-table-column label="品牌" prop="brand" width="60px" align="center"></el-table-column>
                  <el-table-column label="单位" prop="unit" width="60px" align="center"></el-table-column>
                  <el-table-column label="数量" prop="count" width="80px" align="center"></el-table-column>
                  <el-table-column label="单价" prop="price" width="100px" align="center"></el-table-column>
                  <el-table-column label="小计" prop="total" width="100px" align="center"></el-table-column>
                  <el-table-column label="备注" prop="dmemo"></el-table-column>
                </el-table>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="采购单号" prop="reqcode" width="130px"></el-table-column>
          <el-table-column label="状态" align="center" width="70px">
            <template v-slot="scope">
              <span v-if="scope.row.paidstatus==0" style="color:red;">未付</span>
              <span v-if="scope.row.paidstatus==1" style="color:green">已付</span>
              <span v-if="scope.row.paidstatus==2" style="color:chocolate;">部分</span>
            </template>
          </el-table-column>

          <el-table-column label="销方单位" prop="seller" width="150px" show-overflow-tooltip></el-table-column>
          <el-table-column label="采购途径" prop="buyroute" width="80px" align="center"></el-table-column>
          <el-table-column label="付款方式" prop="paytype" width="80px"></el-table-column>
          <el-table-column label="店铺名称" prop="shopurl" width="80px" show-overflow-tooltip>
            <template v-slot="scope">
              <a :href="scope.row.shopurl" target="_blank"  v-if="scope.row.shopurl!=''"><i class="el-icon-link"></i></a>
              <span>{{scope.row.shopname}}</span>
            </template>
          </el-table-column>
          <el-table-column label="订单金额" prop="sum" width="90" align="center"></el-table-column>
          <el-table-column label="未付金额" width="90" align="center">
            <template v-slot="scope">
              <div style="background-color: #ffd6ce; width: 70px;">{{(scope.row.sum-scope.row.paidrmb).toFixed(4)}}</div>
            </template>
          </el-table-column>
          <el-table-column label="发票" align="center" width="120px" show-overflow-tooltip>
            <template v-slot="scope">
              {{scope.row.tickettype}}
            </template>
          </el-table-column>
          <el-table-column label="购方单位" prop="buyer" show-overflow-tooltip></el-table-column>
          <el-table-column label="客户" prop="client" align="center" width="80px" show-overflow-tooltip></el-table-column>
          <el-table-column label="请款人" prop="requester" align="center" width="80px" show-overflow-tooltip></el-table-column>
          <el-table-column label="运费" prop="yunfei" width="120px" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="采购时间" prop="reqdate" show-overflow-tooltip></el-table-column>
        </el-table>
      </div>
      <div style="display: flex; margin-top: 5px;">
        <div style="flex: 1;line-height: 30px;">选中总额:{{sum_selection.toFixed(4)}}</div>
        <el-pagination class="pagination" prev-text="上一页" next-text="下一页" layout=" prev, pager, next,sizes,total"
          :page-sizes="[10, 20, 30]" :total="numrows" :page-size="pagesize" :current-page="curpage"
          @size-change="handleSizeChange" @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>
    <div>
      <div class="title">收款信息</div>
      <el-form :model="formData" ref="form1" label-width="100px" :rules="rules" :disabled="selectrow==null">
        <el-row :gutter="15">
          <el-col :span="8">
            <el-form-item label="收款单位:">
              {{selectrow!=null? selectrow.seller:""}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开户行:">
              {{selectrow!=null? selectrow.bankname:""}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="银行账号:">
              {{selectrow!=null? selectrow.banknumber:""}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
                <el-form-item label="付款金额:" prop="amount">
                  <el-input-number v-model="formData.amount" :precision="4" :min="0" :max="sum_selection" style="width:250px"></el-input-number>
                </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="备注信息:" prop="memo">
              <el-input type="textarea" v-model="formData.memo" placeholder="退款备注:填写退款原因,退款情况等信息"
                :readonly="formData.status=='1'" :rows="3" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div slot="footer">
      <el-button size="medium">取消</el-button>
      <el-button type="primary" size="medium" @click="handleSave" :disabled="selectrow==null">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        index: -1,
        filterData: {
          reqcode: '',
          title: '',
          model: '',
          client:'',
          supname: '',
          requester:''
        },
        formData: {
          reqcode: '',
          type: '',
          amount: 0,
          unpaidrmb:0,
          seller:'',
          buyer:'',
          buyroute:'',
          paytype:'',
          status: '0',
          done_date: '',
          tickettype: '',
          ticketrate: '',
          memo: ''
        },
        max_amount: 0,
        selectrow: null,
        sum_selection: 0,
        numrows: 0,
        tableData: [],
        curpage: 1,
        pagesize: 15,
        dialogVisible: false,
        rules: {}
      }
    },
    methods: {
      checkselectable(row,index){
        if(row.sum-row.paidrmb==0){
          return false;
        }
        return true;
      },
      handleSelection(list, row) {
        this.selectrow = row;
        if (list.length == 0) {
          this.selectrow = null;
        }
        if (list.length > 1) {
          let del_row = list.shift();
          this.$refs.filterTable.toggleRowSelection(del_row, false);
        }
        this.sum_selection = this.selectrow ? parseFloat(this.selectrow.sum-this.selectrow.paidrmb) : 0;
        this.formData.reqcode = this.selectrow ? this.selectrow.reqcode : "";
        this.formData.tickettype = this.selectrow ? this.selectrow.tickettype : "";
        this.formData.paytype=this.selectrow? this.selectrow.paytype:"";
        this.formData.buyroute=this.selectrow? this.selectrow.buyroute:"";
        this.formData.seller=this.selectrow? this.selectrow.seller:"";
        this.formData.buyer=this.selectrow? this.selectrow.buyer:"";
        this.max_amount = this.sum_selection;
        this.formData.amount = this.max_amount;
        this.formData.memo='';
      },
      handleSizeChange: function(val) {
        this.pagesize = val;
        this.curpage = 1;
        this.loadDataList();
      },
      handleCurrentChange: function(val) {
        this.curpage = parseInt(val);
        this.loadFilterData();
      },
      init() {
        this.selectrow = null;
        this.loadFilterData();
      },
      handleFilterData() {
        this.curpage = 1;
        this.loadFilterData();
      },
      loadFilterData() {
        const params = {
          curpage: this.curpage,
          pagesize: this.pagesize,
          reqcode: this.filterData.reqcode,
          title: this.filterData.title,
          model: this.filterData.model,
          client:this.filterData.client,
          supname: this.filterData.supname,
          requester:this.filterData.requester,
        }

        this.axios.post("api/admin/buylist/list_filter", params).then(res => {
          if (res.status == 200 && res.data.code == 1) {
            this.tableData = res.data.list;
            this.numrows = res.data.numrows;
          }
        })
      },
      handleSave() {
        if (this.formData.reqcode == "") {
          this.$message.error("请先选择采购单！");
          return;
        }
        this.$refs.form1.validate(ok => {
          if (ok) {
            const params = {
              reqcode: this.selectrow.reqcode,
              buyid: this.selectrow.id,
              bdid: this.selectrow.bdid,
              amount: parseFloat(this.formData.amount),
              memo: this.formData.memo,
              seller:this.formData.seller,
              buyer:this.formData.buyer,
              paytype: this.selectrow.paytype,
              requester:this.selectrow.requester,
              buyroute: this.selectrow.buyroute,
              shopurl:this.selectrow.shopurl,
              shopname:this.selectrow.shopname,
              tickettype: this.formData.tickettype,
              ticketrate: this.formData.ticketrate,
              supname: this.selectrow.supname,
              yunfei: this.selectrow.yunfei,
            }
            this.selectrow=null;
            this.axios.post("api/admin/buypayment/create", params).then(res => {
              if (res.status == 200 && res.data.code == 1) {
                this.$message.success({
                  message: res.data.msg,
                  duration: 1500,
                  showClose: true
                });
                this.dialogVisible = false;
                this.$emit("complete");
              } else {
                this.$message.error({
                  message: res.data.msg,
                  duration: 1500,
                  showClose: true
                });
              }
            })
          }
        })
      }
    }
  }
</script>

<style>
</style>
